import 'package:base_flutter/base_flutter.dart';
import 'package:dotted_border/dotted_border.dart';
import 'package:fan_da_app/model/shop_car_model.dart';
import 'package:fan_da_app/res/drawables.dart';
import 'package:fan_da_app/view_model/food_list_view_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';

class FoodListFragment extends BaseStatefulMvvmWidget {
  dynamic type;

  FoodListFragment({required this.type});

  @override
  State<StatefulWidget> createState() => _FoodListState();
}

class _FoodListState
    extends BaseMvvmRefreshState<FoodListViewModel, FoodListFragment> {
  @override
  Widget buildRootView(BuildContext context, Widget loadingContentWidget) {
    return loadingContentWidget;
  }

  @override
  Widget createScrollWidget() {
    return GridView.count(
      crossAxisSpacing: 10,
      mainAxisSpacing: 10,
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 16),
      crossAxisCount: 2,
      childAspectRatio: 0.8,
      physics: NeverScrollableScrollPhysics(),
      children: viewModel.listItems
          .map((e) => DottedBorder(
                  color: mainColor,
                  borderType: BorderType.RRect,
                  radius: 8.radius,
                  child: Stack(
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          AspectRatio(
                            aspectRatio: 1,
                            child: ImageLoad(
                              "https://i2.chuimg.com/1603e145ca10469d941712ce4d1d6212_1280w_1710h.jpg?imageView2/2/w/660/interlace/1/q/75",
                              fit: BoxFit.cover,
                            ).toRound(borderRadius: 8.borderRadius),
                          ),
                          SizedBox(
                            height: 12,
                          ),
                          Text(
                            '菠萝咕佬肉',
                            style: TextStyle(fontSize: 15, color: Colors.black),
                          ).addToContainer(
                              margin: EdgeInsets.symmetric(horizontal: 10))
                        ],
                      ),

                      if(e.contain)
                        ScaledWidget(
                          child: SvgPicture.asset(
                            cat_foot,
                            width: 40,
                            height: 40,
                          ),
                        ).setLocation(right: 0, bottom: 10)
                    ],
                  )).onTap(() {
                    viewModel.onItemClick(e);
      })
              .addToContainer(
                  decoration: BoxDecoration(
                      color: Colors.white, borderRadius: 8.borderRadius)))
          .toList(),
    );
  }


  @override
  FoodListViewModel createViewModel() {
    return FoodListViewModel(context,type: widget.type);
  }
}

class ScaledWidget extends StatefulWidget{
  Widget child;

  ScaledWidget({required this.child});

  @override
  State<StatefulWidget> createState() => _ScaledState();

}

class _ScaledState extends State<ScaledWidget>  with SingleTickerProviderStateMixin{

  late Animation<double> animation;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(milliseconds: 100), vsync: this);
    //指定弹簧效果Curve
    animation = CurvedAnimation(parent: controller, curve: Curves.easeInQuad);
    animation = Tween(begin: 8.0, end: 0.8).animate(animation);
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(scale: animation,child: widget.child,);
  }

}
